#{extends 'main.html' /}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5 Transitional//EN" "http://www.w3.org/TR/html5/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="/public/javascripts/createTutorial.js"></script>

<title>Insert title here</title>

</head>
<body>
<br><br><br><title>Create a New Tutorial</title><br>
	<!-- in this html file we created text boxes for Title,Topic,Content,Key related words
  , And Experience level of the created tutorial as the creator has to enter all these fields
  in oder then to click on the button "Create Tutorial & Set Relations" which will create the Tutorial
  in the database and then redirect to the Relation Page
  @author Rana Amr : is responsible for the method createNewTutorial, content, the Experience level 
  @author Yasmin Gamal : is responsible for Title, Topic,Key words and the later for the relation Page -->
	<form action="@{Tutorials.createNewTutorial()}" method="POST">
		<input name="topicId" style="display: none;" value=${topic.id}></input>
		Title *: <span style="color: #c00" class="error">#{error 'title'
			/}</span><br>
		<input name="title" COLS=20 ROWS=3 value="${flash.content}"></input>
		<br> Content *: <span style="color: #c00" class="error">#{error
			'content' /}</span><br>
		<textarea COLS=150 ROWS=40 name="content" COLS=40 ROWS=6>${flash.content}</textarea>
		<br> Summary: <br>
		<textarea COLS=80 ROWS=20 name="summary">${flash.summary}</textarea>
		
		<br> Key related Words with "," between words And No Spaces: <span
			style="color: #c00" class="error">#{error 'words' /}</span><br>
		
		<input type="text" id="words" size="40" name="words" COLS=30 ROWS=2 value="${flash.words}" autocomplete="off"/>
<script>
$("#words").autocomplete({
	source: function( request, response){
		$.ajax({
			url: "@{Tutorials.autocomplete()}",
			dataType: "json",
			data: {
				term: request.term,
				topicId: ${topic.id}
			},
			success: function( data ){
				response($.map(data, function(item){
					return {
						label: item,
						value: item
					}
				}));
			}
		});
	},
	minLength: 1
});
</script>
		
		<br> Experience level *:<br> <select name="Exp" id="mySelect">
			<option>Select</option>
			<option>Beginner</option>
			<option>Medium</option>
			<option>Expert</option>
		</select> <input type="submit" value="Create Tutorial & upload media files & Set Relations" /> <br />
		<br />
	</form>
<div id="container" style="width: 100%; height: 400px"></div>
</body>
</html>
